<template>
    <div class="carousel">
        <div class="slides" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
            <div v-for="(slide, index) in slides" :key="index" class="slide">
                <img :src="slide.image" :alt="slide.alt" />
            </div>
        </div>
        <div class="controls">

            <el-icon @click="prevSlide">
                <ArrowLeftBold />
            </el-icon>

            <el-icon @click="nextSlide">
                <ArrowRightBold />
            </el-icon>
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
    name: 'Carousel',
    props: {
        slides: {
            type: Array,
            required: true,
            default: () => [],
            validator: (slides) => {
                return slides.every((slide) => typeof slide === 'object' && slide.hasOwnProperty('image') && slide.hasOwnProperty('alt'));
            },
        },
    },
    setup(props) {
        const currentIndex = ref(0);

        const prevSlide = () => {
            currentIndex.value = (currentIndex.value - 1 + props.slides.length) % props.slides.length;
        };

        const nextSlide = () => {
            currentIndex.value = (currentIndex.value + 1) % props.slides.length;
        };

        return {
            currentIndex,
            prevSlide,
            nextSlide,
        };
    },
};
</script>

<style scoped>
.carousel {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    z-index: 888;
}

.slides {
    display: flex;
    transition: transform 0.5s ease;
}

.slide {
    flex: 0 0 100%;
}

.slide img {
    width: 100%;
    height: 300px;
    object-fit: cover;

}

.controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.controls button {
    margin: 0 5px;
}
</style>